<template>
    <view>
        <div class="flex-content">
            <image style="border-radius: 5%;margin-top: 5%;width: 100%;height: 300rpx;"
                src="https://cxj.szzkba.cn/upload/i/2024/06/05/172949.jpeg">
            </image>
            <nut-form ref="formRef" :model-value="formData">
                <nut-form-item label="姓名" prop="user_Nickname" required :rules="[{ required: true, message: '请填写姓名' }]">
                    <nut-input v-model="formData.user_Nickname" placeholder="请输入昵称" type="text"
                        @blur="customBlurValidate('user_Nickname')" />
                </nut-form-item>
                <nut-form-item label="性别" prop="user_Sex" required :rules="[{ required: true, message: '请选择性别' }]">
                    <nut-radio-group v-model="formData.user_Sex" direction="horizontal"
                        @change="customBlurValidate('user_Sex')">
                        <nut-radio label="1">男</nut-radio>
                        <nut-radio label="2">女</nut-radio>
                    </nut-radio-group>
                </nut-form-item>
                <nut-form-item label="年龄" prop="user_Age" required :rules="[{ required: true, message: '请填写年龄' }]">
                    <nut-input v-model="formData.user_Age" placeholder="请输入年龄" type="text"
                        @blur="customBlurValidate('user_Age')" />
                </nut-form-item>
                <!-- <nut-form-item label="身高" prop="user_Tall" required :rules="[{ required: true, message: '请填写身高' }]">
                    <nut-row>
                        <nut-col :span="21">
                            <nut-input v-model="formData.user_Tall" placeholder="请输入身高" type="text"
                                @blur="customBlurValidate('user_Tall')" />
                        </nut-col>
                        <nut-col :span="3">cm</nut-col>
                    </nut-row>
                </nut-form-item>
                <nut-form-item label="体重" prop="user_Weight" required :rules="[{ required: true, message: '请填写体重' }]">
                    <nut-row>
                        <nut-col :span="21">
                            <nut-input v-model="formData.user_Weight" placeholder="请输入体重" type="text"
                                @blur="customBlurValidate('user_Weight')" />
                        </nut-col>
                        <nut-col :span="3">kg</nut-col>
                    </nut-row>
                </nut-form-item> -->
                <nut-form-item label="入驻城市">
                    <div @click="show = true">{{ formData.city.length > 0 ? String(formData.city) : '请选择城市' }}</div>
                    <nut-popup v-model:visible="show" position="bottom">
                        <nut-picker v-model="formData.city" :columns="columns" title="请选择城市" @confirm="confirm"
                            @cancel="show = false" />
                    </nut-popup>
                </nut-form-item>
                <!-- <div class="flex-content2">
          <div style="display: flex; margin: 5% 0;align-items: center;">
            <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">上传照片</text><text
              style="font-size: 12px;margin-top: 2%;color:#999999">*单张图片不能超过5M</text>
          </div>
          <div style="margin-top:-2%; border-bottom: 1px solid #e6e6e6;"></div>
          <div style="margin:0 1%">
            <nut-uploader :url="uploadUrl" accept="image/*" @success="picSucc" v-model:file-list="defaultFileList"
              maximum="1" multiple>
            </nut-uploader>
          </div>
        </div> -->
                <div class="flex-content2">
                    <div style="display: flex; margin: 5% 0;align-items: center;">
                        <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">服务项目</text>
                    </div>
                    <nut-button style="margin: 2% 5%" shape="square" plain size="mini" color="#21C38F"
                        @click="addClass">
                        <template #icon>
                            <Uploader />
                        </template>添加</nut-button>
                    <nut-popup v-model:visible="classShow" position="bottom">
                        <nut-picker v-model="sort" :columns="classList" title="请选择分类" @confirm="confirmClass"
                            @cancel="classShow = false" />
                    </nut-popup>
                    <block v-for="item in serviceList">
                        <div style="display: flex; margin: 5% 0;align-items: center;">
                            <text style="font-size: 16px;margin:2% 5% 0 5%;font-weight: bold;">{{ item.text }}</text>
                        </div>
                        <div>
                            <nut-grid :column-num="3" :border="false">
                                <nut-grid-item v-for="ele in item.list">
                                    <nut-checkbox-group v-model="formData.PageSettingId">
                                        <nut-checkbox :label="ele.ID" shape="button"> {{ ele.project_Name }}
                                        </nut-checkbox>
                                    </nut-checkbox-group>
                                </nut-grid-item>
                            </nut-grid>
                        </div>
                    </block>
                </div>
                <div style="border-bottom: 1px solid #e6e6e6;"></div>
                <div class="flex-content">
                    <div style="margin: 5% 0;">
                        <text style="color:#999999;font-size: 16px;">*请如实填写个人信息</text>
                    </div>
                    <nut-form-item prop="agreeVal" required :rules="[{ required: true, message: '请同意用户协议' }]">
                        <div style="margin-bottom: 10%;white-space: nowrap;">
                            <nut-checkbox v-model="formData.agreeVal" @change="customBlurValidate('agreeVal')">
                                <span>提交即同意</span><span style="color:aquamarine">《用户协议(服务承包方)》</span>
                            </nut-checkbox>
                        </div>
                    </nut-form-item>
                    <div>
                        <nut-button size="small" color="#21C38F" @click="submit" block>提交</nut-button>
                    </div>
                </div>
            </nut-form>
        </div>
    </view>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue';
import { showToast } from '@nutui/nutui'
import Taro from '@tarojs/taro';
import { Left, Uploader } from '@nutui/icons-vue-taro';
import { createUser, getIndexClass, getIndexService } from '../../../../api/index'
export default {
    components: {
        Left,
        Uploader
    },
    setup() {
        const confirm = ({ selectedValue, selectedOptions }) => {
            console.log(selectedValue[0], selectedOptions[0])
            state.show = false
        };
        const confirmClass = ({ selectedValue, selectedOptions }) => {
            console.log(selectedValue[0], selectedOptions[0])
            state.classShow = false
            let data = selectedOptions[0]
            state.serviceList.push({
                text: data.text,
                value: data.value,
                list: [] as any
            })
            getList(data.value, { pageType: data.value })
        };
        const getList = (value, data) => {
            getIndexService(data).then(res => {
                if (res.code == 0) {
                    let list = state.serviceList
                    let i = list.findIndex((item) => { return item.value == value })
                    let arr = res.data.list
                    arr.forEach(item => {
                        item.ID = item.ID + ''
                    })
                    state.serviceList[i].list.push(...arr)
                }
            })
        }
        const submit = () => {
            console.log(state.formRef)
            state.formRef?.validate().then(({ valid, errors }) => {
                if (valid) {
                    if (state.formData.PageSettingId.length) {
                        console.log('success:', state.formData)
                        state.formData.user_ID = state.user.uuid
                        state.formData.user_City = state.formData.city[0]
                        // state.formData.PageSettingId = state.formData.PageSettingId
                        createUser(state.formData).then(res => {
                            if (res.code == 0) {
                                Taro.showToast({
                                    title: '提交成功',
                                    icon: 'success',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    jumpTo('/packageA/pages/mypage/index')
                                }, 500)
                            }
                        })
                    } else {
                        Taro.showToast({
                            title: '请至少选择一个服务项目',
                            icon: 'error'
                        })
                    }
                } else {
                    console.warn('error:', errors)
                }
            })
        };
        // 失去焦点校验
        const customBlurValidate = (prop) => {
            state.formRef?.validate(prop).then(({ valid, errors }) => {
                if (valid) {
                    console.log('success:', state.formData)
                } else {
                    console.warn('error:', errors)
                }
            })
        };
        const state = reactive({
            list: [
                {
                    proj_name: '乐平市废弃矿山生态修复综合治理项目',
                    proj_no: '赣建乐招字[2023] 第 21 号',
                    proj_location: '九江市',
                    proj_type: '房屋及市政工程',
                }
            ],
            formData: {
                PageSettingId: [] as any,
                user_ID: '',
                user_Nickname: '',
                user_Sex: '',
                user_Age: '',
                user_Tall: '0',
                user_Weight: '0',
                user_City: '' as any,
                city: [],
                user_Enterts: '',
                user_Services: '',
                user_Leisures: '',
                user_Balls: '',
                enterts: [],
                services: [],
                leisures: [],
                balls: [],
                agreeVal: false
            },
            formRef: null,
            columns: [
                { text: '上饶', value: '上饶' },
            ],
            show: false,
            val: '',
            uploadUrl: 'https://xxxxx',
            defaultFileList: [],
            user: {},
            classList: [],
            sort: '',
            classShow: false,
            serviceList: [],
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data ? res.data : {}
                    console.log(state.user.uuid)

                }
            })
            getIndexClass({ ID: 12 }).then(res => {
                if (res.code == 0) {
                    let list = res.data.resysDictionary.sysDictionaryDetails, arr = [] as any
                    list.forEach(item => {
                        arr.push({ text: item.label, value: item.value })
                    })
                    state.classList = arr
                }
            })
        })
        const picSucc = (data, option, fileItem) => {
            console.log(JSON.parse(data.data.data).url)
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const addClass = () => {
            state.classShow = true
        }
        return {
            confirm,
            submit,
            customBlurValidate,
            picSucc,
            jumpTo,
            addClass,
            confirmClass,
            getList,
            ...toRefs(state)
        };

    }
}
</script>

<style lang="scss">
.flex-content {
    margin: 0 auto 0;
    width: 90%;
    align-items: center;
    background: transparent;
    bottom: 0;
    /* 在 H5 模式下将会编译成 margin-bottom: 50px，在小程序模式下则会忽略 */
    margin-bottom: taro-tabbar-height;

    .nut-icon-check-checked {
        color: #21C38F !important;
    }

    .nut-checkbox__button--active {
        color: #21C38F !important;
        border-color: #21C38F !important;
        background: rgba($color: #21C38F, $alpha: 0.1);
    }

    .nut-icon-checked {
        color: #21C38F !important;
    }
}

.flex-content2 {
    margin: 0 auto 0;
    align-items: center;
    background: transparent;
}

.nut-checkbox__button {
    white-space: nowrap;
}

.nut-checkbox.nut-checkbox--button {
    margin: 0;
}

.nut-checkbox__label {
    display: flex;
}
</style>